*{margin:0;padding:0;box-sizing: border-box}
ol,ul{list-style: none}
a{color:inherit;text-decoration: none;}
$designWidth :375;
$designHeight :667;
@keyframes recycle{
    from{
        transform: rotate(0deg)
    }
    to{
        transform: rotate(359deg)
    }
}
.player{
    width:100vw;
    height:100vh;
    z-index: 1;
    text-align: center;
    overflow: hidden;
    .nav{
        height: 67.5px;
        width:100%;
        >.logo{
            position: absolute;
            margin:10px;
            height:20px;
            width: 100px;
            .topsvg{
                height:20px;
                width: 100px;
            }
        }
        >.pointer{
            margin: auto;
            height:128.44px;
            width:90px;
            z-index: 2;
            position: relative;
            >img{
                height:128.44px;
                width:90px;
            }
            
            >.playbutton{
                position: absolute;
                top:174px;
                left:19px;
                z-index: 2;
                >.play{    
                    width:57.5px;
                    height:57.5px;
                    >img{
                        width:57.5px;
                        height:57.5px;
                    }
                }
                >.pause{
                    display: none;
                    position: absolute;
                    width:57.5px;
                    height:57.5px;
                    >img{
                        width:57.5px;
                        height:57.5px;
                    }
                }   
            }
            >.playbutton.active{
                >.play{
                    display: none;
                }
                >.pause{
                    display: block;
                }
            }
        }
    }
    .discWrapper{
        margin:0 auto;
        height:270px;
        width:270px;
        position: relative;
        animation: recycle 20s infinite linear ;
        animation-play-state: paused;
        .disc_light{
                left:0px;
                right: 0px;
                top:0px;
                bottom: 0px;
                margin:auto;
                width:270px;
                height:270px;
                position: absolute;
                border:1px solid transparent;
                border-radius: 50%;
            >img{
                width:270px;
                height:270px;  
            }
            .disc{
                width:270px;
                height:270px;
                position: absolute;
                left:0;
                top:0;
                border:1px solid transparent;
                border-radius: 50%;
                >img{
                    width:270px;
                    height:270px;
                }
                .disc_cover{
                    position: absolute;
                    left:18%;
                    top:18%;
                    background: transparent;
                    border:1px solid transparent;
                    border-radius: 50%;
                    width:175.88px;
                    height:175.88px;
                    overflow: hidden;
                    >img{
                        width:179.88px;
                        height:179.88px;
                    } 
                    
 
                    
                }
            }
        }
    }
    .discWrapper.active{
        animation-play-state: running;
    }
    .lyricsWrapper{
        height:253.25px;
        width:100%;
        color:white;
        text-align: center;
        
        h4{
            margin: 10px;
        }
        h6{
            margin:10px;
        }
        .lyrics{
            height:120px;
            color:#999;
            overflow: hidden;
        }
        .line{
            
            // transition: 0.5s;
            p.active{
                color:white;
            }
        }
        
    }
    .buttonWrapper{
        height:calc(100% - 591px);
        display: flex;
        align-items: center;
        justify-content: space-around;
        button{
            width:144px;
            height:34px;
            border:1px solid rgb(208, 58, 54);
            border-radius: 17px;
            
        }
        #open{
            color:rgb(208, 58, 54);
            outline:none;
            background: transparent;
        }
        #download{
            background: rgb(208, 58, 54);
            color:white;
            outline:none;
        }
    }
}
.player::after{
    content:'';
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:100%;
    background: transparent url('https://i.ytimg.com/vi/QH2-TGUlwu4/hqdefault.jpg')  center no-repeat;
    filter: blur(10px);
    background-size: cover;
    z-index:-1;
}